{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px"> {# 按钮"新建部门"和面板表添加10像素的距离 #}
            <a class="btn btn-success" href="/tools/order/add/" target="_blank">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新增订单
            </a>

            <!-- 批量操作按钮组 -->
            <div class="btn-group" style="margin-left: 10px;">
                <button id="batchDelete" class="btn btn-danger" disabled>
                    <span class="glyphicon glyphicon-trash"></span>
                    批量删除
                </button>
            </div>

            <!-- ajax 绑定的按钮 -->
{#            {% if perms.tools.add_order %}#}
            <button id="btnExt" type="button" class="btn btn-primary btn-xs pull-right" style="margin-left: 10px;">查询</button>
            <button id="add" type="button" class="btn btn-primary btn-xs" style="margin-left: 10px;">新增</button>
            <button id="modify" type="button" class="btn btn-primary btn-xs" style="margin-left: 10px;">修改</button>
            <button id="delete" type="button" class="btn btn-primary btn-xs" style="margin-left: 10px;">删除</button>
{#            {% endif %}#}

            {% comment %}<!-- 搜索框 -->
            <div style="float: right; width: 300px;">
                <form method="get">
                    <div class="input-group">
                        <input type="text" name="query" class="form-control" placeholder="Search for..."
                            value="{{ search_data }}">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </span>

                    </div>
                </form>
            </div>{% endcomment %}
            <!-- 多条件搜索框 -->
            <div style="float: right; width: 650px;">
                <form method="get" class="form-inline">
                    <div class="form-group">
                        <input id="search_oid" type="text" name="oid" class="form-control" placeholder="订单号"
                               value="{{ search_oid }}" style="width: 120px;">
                    </div>

                    <div class="form-group">
                        <input id="search_title" type="text" name="title" class="form-control" placeholder="商品名称"
                               value="{{ search_title }}" style="width: 120px;">
                    </div>

                    <div class="form-group">
                        <select id="status_choice" name="status" class="form-control" style="width: 120px;">
                            <option value="">-- 订单状态 --</option>
                            {% for item in status_choice %}
                                <option value="{{ item.0 }}" {% if search_status == item.0|stringformat:"s" %}selected{% endif %}>
                                    {{ item.1 }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group">
                        <input id="search_user" type="text" name="user" class="form-control" placeholder="订单用户"
                               value="{{ search_user }}" style="width: 120px;">
                    </div>

                    <button id="btn_search" type="submit" class="btn btn-primary">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        搜索
                    </button>

{#                    <a href="/tools/task/list/" class="btn btn-default">#}
{#                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>#}
{#                        重置#}
{#                    </a>#}
                    <button id="reset" type="submit" class="btn btn-default pull-right" >
                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                        重置
                    </button>
                </form>
            </div>
        </div>

        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                任务列表
            </div>

            <!-- Table 表格 -->
            <table class="table table-bordered">  {# table-bordered  边框 #}
                <thead>
                <tr>
                    <th width="50px"><input type="checkbox" id="selectAll"></th>
{#                    <th>任务级别</th>#}
{#                    <th>任务名称</th>#}
{#                    <th>任务详情</th>#}
{#                    <th>任务负责人</th>#}
                    <form method="post">
                        {% for field in form %}
                            <th>{{ field.label }}</th>
                        {% endfor %}
                    </form>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in querySet %}
                    <tr>
{#                        <td><input type="checkbox" class="rowCheckbox" value="{{ obj.id }}"></td>#}
                        <th scope="row">{{ obj.id }}</th>
                        <td>{{ obj.oid }}</td>
                        <td>{{ obj.title }}</td>
                        <td>{{ obj.price }}</td>
                        <td>{{ obj.get_status_display }}</td>
                        <td>{{ obj.user.username }}</td>
                        <td>
                            <a class="btn btn-primary btn-xs" href="/tools/order/{{ obj.id }}/edit/">编辑</a>
{#                            <a class="btn btn-danger btn-xs" href="/tools/task/delete/?nid={{ obj.id }}">删除</a>#}
                            <a class="btn btn-danger btn-xs delete-btn" href="/tools/order/{{ obj.id }}/delete/">删除</a>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>

        <!-- 分页导航 -->
        <ul class="pagination">
            {#            style="position: absolute;transform: translate(50%);" 居中设置 根据实际情况改动       #}
            {{ page_string }}
        </ul>

    </div>



{#    <!-- 新建 & 修改 订单的模态窗口 -->#}
{#    <div class="modal fade" id="add-article-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">#}
{#        <div class="modal-dialog" role="document">#}
{#            <div class="modal-content">#}
{#                <div class="modal-header">#}
{#                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span#}
{#                            aria-hidden="true">&times;</span></button>#}
{#                    <h4 class="modal-title" id="myModalLabel">新建订单</h4>#}
{#                </div>#}
{#                <div class="modal-body">#}
{#                    <!-- novalidate 关闭浏览器的表单验证，用Django来控制检验 -->#}
{#                    <form id='saveForm'>#}
{#                        {% csrf_token %}#}
{#                        {% for field in form %}#}
{#                            <div class="form-group">#}
{#                                <label>{{ field.label }}</label>#}
{#                                {{ field }}<span class="error" style="color:#ff0000;"> {{ field.errors.0 }}</span>#}
{#                            </div>#}
{#                        {% endfor %}#}
{#                                        <button type="submit" class="btn btn-primary">保存</button>#}
{#                    </form>#}
{#                </div>#}
{#                <div class="modal-footer">#}
{#                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>#}
{#                    <button id="btnSave" type="button" class="btn btn-primary">保 存</button>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}

    <!-- 新增人员模态框 -->
<div class="modal fade" id="add-article-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">添加人员白名单</h4>
            </div>
            <form id="add-modal-form" class="form-horizontal">
                <div class="modal-body">
                    <input type="hidden" id="add-modal-id">
                    <!-- 包含与主表单相同的字段 -->
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}


{% block js %}
    <script type="text/javascript">
        {#import toast from "../../static/plugins/bootstrap-4.6.2/js/src/toast";#}

        {#// 查询#}
        {#$('#btn_search').on('click',function(){#}
        {#    ('#articles-table').bootstrapTabls('refersh')#}
        {#});#}

        // 重置
        $('#reset').click(function () {
            $('#search_oid').val('');
            $('#search_title').val('');
            $('#status_choice').val('');
            $('#search_user').val('');
        });


        // 下拉框样式控制
        // 页面加载时初始化
        $(document).ready(function() {
            if ($('#status_choice').val() === '') {
                $('#status_choice').css('color', '#999');
            }
            // 选择变化时切换样式
            $('#status_choice').change(function() {
                if ($(this).val() === '') {
                    $(this).css('color', '#999');
                } else {
                    $(this).css('color', '#333');
                }
            });
        });

{% comment %}
        // 新增(Ajax)
        $('#add').click(function () {
            $('#add-article-modal').modal('show');
        });
        $('#btnSave').click(function (e) {
            e.preventDefault();
            $.ajax({
                cache: false,
                type: 'POST',
                url: {% url 'order_ajax_add' %},
                //traditional: true,  // 加上此项可以传数组
                dataType: 'json',
                data: {
                    domain: $('#domain').val(),
                    service: $('#service').val(),
                },
                success: function (data) {
                    if (data.ret){
                        $('add-articale-modal').modal('hide');
                        toastr.success('数据添加成功', '成功提示！');
                        $articlesTab.bootstrapTable('refresh');
                    } else {
                        toastr.warning(data.msg, '告警提示！');
                    }
                }

            });
        })
{% endcomment %}

    // 新增功能
    $("#add").click(function() {
        $("#add-article-modal").modal("show");
    });
    // 新增表单提交
    $("#submit-button").click(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: '{% url "order_ajax_add" %}',
            data: {
                domain: $("#add_domain").val(),
                operation_user: $("#add_operation_user").val(),
                operation_user_name: $("#add_operation_user_name").val(),
                position: $("#add_position").val()
            },
            success: function(data) {
                if (data.ret) {
                    $("#add-article-modal").modal("hide");
                    toastr.success("数据添加成功！", "成功提示!");
                    $articlesTable.bootstrapTable("refresh");
                } else {
                    toastr.warning(data.msg, "告警提示!");
                }
            }
        });
    });


    </script>
{% endblock %}